<template>
  <div class="card-common-inner public-line-remould">
    <first-level-title title="质态分析">
      <div slot="other" class="other-text">{{ dayId | dayjs }}；单位：户</div>
    </first-level-title>
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div v-else class="remould-kpi mg10">
      <div class="kpi-item" v-for="item in list" :key="item.title">
        <div class="title">{{ item.title }}</div>
        <div class="count kpi-line" @click="openDetail(item.val, item.url)">{{ item.val }}</div>
        <div class="percent">
          <span class="sub-percent">环比</span>
          <span :class="item.percent >=0 ? 'percent-up' : 'percent-down'">{{ item.percent }}%</span>
          <img v-if="item.percent >=0" src="~@/assets/imgs/publicline/index/arrow_up.png" />
          <img v-else src="~@/assets/imgs/publicline/index/arrow_down.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import firstLevelTitle from '@/components/common/firstLevelTitle.vue'
import { accountDate } from '@/api/common.js'
import { remould } from '@/api/publicline/index.js'

export default {
  components: { firstLevelTitle },
  data() {
    return {
      isLoading: true,
      list: [
        { title: '携出预警' , val: 0, percent: 0, url: '' },
        { title: '三无用户' , val: 0, percent: 0, url: '' },
        { title: '5G未登网用户' , val: 0, percent: 0, url: '' },
        { title: '端网业不匹配' , val: 0, percent: 0, url: '' },
      ],
      dayId: ''
    }
  },
  mounted() {
    this.getAccountDate()
  },
  methods: {
    // 获取账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.dayId = result[0].value
        this.getRemould()
      }
    },
    // 获取质态分析数据
    async getRemould() {
      this.isLoading = true
      const res = await remould({ dayId: this.dayId, townNo: this.$isCeo ? this.$gridId : this.$dataPermission })
      const { result, success } = res
      if (success) {
        const info = result[0] || {}
        this.list = [
          { title: '携出预警' , val: info.XCYJ_VALUE || 0, percent: info.XCYJ_HB || 0, url: '/publicline/town-info/xcyjdetail' },
          { title: '三无用户' , val: info.SW_VALUE || 0, percent: info.SW_HB || 0, url: '/publicline/town-info/swdetail' },
          { title: '5G未登网用户' , val: info.WDW_VALUE || 0, percent: info.WDW_HB || 0, url: '/publicline/town-info/5gdetail' },
          { title: '端网业不匹配' , val: info.DWY_VALUE || 0, percent: info.DWY_HB || 0, url: '/publicline/town-info/dwyDetail' },
        ]
        this.isLoading = false
      }
    },
    openDetail(isZero, url) {
      if(isZero != 0) {
        this.$open.call(this, url,
          {
            dayId: this.dayId
          }
        )
      }
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/card.less';
.public-line-remould {
  .mg10 {
    margin-bottom: 10px;
  }
  .remould-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 10px;
    // margin-left: 10px;
    .kpi-item {
      width: 49%;
      &:nth-child(1), &:nth-child(3) {
        border-right: 1px solid rgba(245,245,245,1);
      }
      &:nth-child(1), &:nth-child(2) {
        margin-bottom: 18px;
      }
      .title {
        color: #666;
      }
      .count {
        font-size: 18px;
        margin: 6px 0;
        &.kpi-line {
          color: #4D98FF;
        }
      }
      .percent {
        font-size: 12px;
        img {
          width: 12px;
          padding-left: 4px;
        }
      }
      .sub-percent {
        color: #999;
        padding-right: 12px;
      }
      .percent-up {
        color: #FF6024;
      }
      .percent-down {
        color: #40BB3F;
      }
    }
  }
}
</style>